<template>
  <div>
      <el-button type="primary" @click="dialogVisible = true" size="small">新增读者类型</el-button>
      <excel-import-button  url="/reader/type/import"></excel-import-button>
    <el-table :data="readerTypeList" v-loading="loading">
      <el-table-column label="编号" prop="typeId"></el-table-column>
      <el-table-column label="类型名称" prop="typeName"></el-table-column>
      <el-table-column label="最大借阅数" prop="maxBorrow"></el-table-column>
      <el-table-column label="借阅周期/天" prop="borrowPeriod"></el-table-column>
      <el-table-column label="可续借次数" prop="renewTimes"></el-table-column>
      <el-table-column label="类型说明" prop="description"></el-table-column>
      <el-table-column label="创建时间" prop="createdTime">
        <template #default="scope">
          {{ $timeFormat(scope.row.createdTime) }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updatedTime">
        <template #default="scope">
          {{ $timeFormat(scope.row.updatedTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editReaderType(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteReaderType(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        v-model="dialogVisible"
        :title="isAdd ?'新增读者类型':'修改读者类型'"
        width="500"
        @close="closeHandler"
    >
      <el-form :model="readerTypeForm" label-width="120px" inline ref="readerTypeFormRef" :rules="rules">
        <el-form-item label="类型ID" prop="typeId">
          <el-input v-model="readerTypeForm.typeId" readonly></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="readerTypeForm.typeName"></el-input>
        </el-form-item>
        <el-form-item label="最大可借数量" prop="maxBorrow">
          <el-input-number v-model="readerTypeForm.maxBorrow"></el-input-number>
        </el-form-item>
        <el-form-item label="借阅周期(天)" prop="borrowPeriod">
          <el-input-number v-model="readerTypeForm.borrowPeriod"></el-input-number>
        </el-form-item>
        <el-form-item label="可续借次数" prop="renewTimes">
          <el-input-number v-model="readerTypeForm.renewTimes"></el-input-number>
        </el-form-item>
        <el-form-item label="类型说明" prop="description">
          <el-input v-model="readerTypeForm.description"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitSaveReaderType(readerTypeFormRef)">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {
  reqCreateReaderType,
  reqDeleteReaderType,
  reqGetReaderTypeList,
  reqUpdateReaderType
} from "@/api/reader/readerType.js";
import ExcelImportButton from "@/components/common/ExcelImportButton.vue";

let readerTypeList = ref([])
let readerTypeForm = reactive({
  typeId: null,
  typeName: '',
  maxBorrow: 0,
  borrowPeriod: 0,
  renewTimes: 0,
  description: '',
  createdTime: null,
  updatedTime: null
});
let readerTypeFormRef = ref(null);
let dialogVisible = ref(false)
let isAdd = ref(true);
let loading = ref(true);

let editReaderType = (readerType) => {
  Object.assign(readerTypeForm, readerType)
  isAdd.value = false
  dialogVisible.value = true
}

let submitSaveReaderType = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (isAdd.value) {
        await reqCreateReaderType(readerTypeForm)
      } else await reqUpdateReaderType(readerTypeForm)
      await getReaderTypeList()
      dialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}
let getReaderTypeList = async () => {
  let res = await reqGetReaderTypeList()
  readerTypeList.value = res.data
  loading.value = false
}
let deleteReaderType = async (readerType) => {
  ElMessageBox.confirm(
      `确定要删除类型：【${readerType.typeName}】吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        reqDeleteReaderType(readerType.typeId)
            .then(() => {
              getReaderTypeList()
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}
let resetReaderTypeForm = () => {
  readerTypeForm.typeId = null
  readerTypeForm.typeName = ''
  readerTypeForm.maxBorrow = 0
  readerTypeForm.borrowPeriod = 0
  readerTypeForm.renewTimes = 0
  readerTypeForm.description = ''
  readerTypeForm.createdTime = null
  readerTypeForm.updatedTime = null
}
let rules = {
  typeName: [
    {required: true, message: '请输入类型名称', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
  ],
  maxBorrow: [
    {required: true, message: '请输入最大可借数量', trigger: 'blur'},
  ],
  borrowPeriod: [
    {required: true, message: '请输入借阅周期', trigger: 'blur'},
  ],
  renewTimes: [
    {required: true, message: '请输入可续借次数', trigger: 'blur'},
  ],
}
let closeHandler = () => {
  resetReaderTypeForm()
  isAdd.value = true
}
onMounted(() => {
  getReaderTypeList()
})
</script>

<style scoped>

</style>
